<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
    <meta name="layout" content="main">
    <title>Main</title>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'frame.css')}" type="text/css">
    <r:external dir="js/charts/Highstock" file="highstock.js"/>
</head>

<body>
<div class="man_zone">
    <table width="99%" border="0" align="center" cellpadding="3" cellspacing="1" class="table_style">
        <tr>
            <td width="15%" class="left_title_1"><span class="left-title">简单线性图表</span></td>
            <td width="85%">
                <script type="text/javascript">
                    $(function() {

                        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
                            // Create the chart
                            window.chart = new Highcharts.StockChart({
                                chart : {
                                    renderTo : 'containerWithBasicLine'
                                },

                                rangeSelector : {
                                    selected : 1
                                },

                                title : {
                                    text : 'AAPL存储价格'
                                },

                                series : [{
                                    name : 'AAPL',
                                    data : data,
                                    tooltip: {
                                        valueDecimals: 2
                                    }
                                }]
                            });
                        });

                    });
                </script>

                <div id="containerWithBasicLine" style="min-width: 500px; height: 500px; margin: 0 auto"></div>
            </td>
        </tr>
        <tr>
            <td class="left_title_2">对比的线性波动图表</td>
            <td>
                <script type="text/javascript">
                    $(function() {
                        var seriesOptions = [],
                                yAxisOptions = [],
                                seriesCounter = 0,
                                names = ['MSFT', 'AAPL', 'GOOG'],
                                colors = Highcharts.getOptions().colors;

                        $.each(names, function(i, name) {

                            $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?',	function(data) {

                                seriesOptions[i] = {
                                    name: name,
                                    data: data
                                };

                                // As we're loading the data asynchronously, we don't know what order it will arrive. So
                                // we keep a counter and create the chart when all the data is loaded.
                                seriesCounter++;

                                if (seriesCounter == names.length) {
                                    createChart();
                                }
                            });
                        });



                        // create the chart when all data is loaded
                        function createChart() {

                            chart = new Highcharts.StockChart({
                                chart: {
                                    renderTo: 'containerWithCompareLine'
                                },

                                rangeSelector: {
                                    selected: 4
                                },

                                yAxis: {
                                    labels: {
                                        formatter: function() {
                                            return (this.value > 0 ? '+' : '') + this.value + '%';
                                        }
                                    },
                                    plotLines: [{
                                        value: 0,
                                        width: 2,
                                        color: 'silver'
                                    }]
                                },

                                plotOptions: {
                                    series: {
                                        compare: 'percent'
                                    }
                                },

                                tooltip: {
                                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                                    valueDecimals: 2
                                },

                                series: seriesOptions
                            });
                        }

                    });
                </script>
                <div id="containerWithCompareLine" style="min-width: 500px; height: 500px; margin: 0 auto"></div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>